<template>
    <div class="status-image">
        <!-- <span>{{ num }}</span> -->
        <img :src="imgSrc" :alt="altText" />
    </div>
</template>

<script>
export default {
    name: 'StausImg',
    props: {
        direction: {
            type: String,
            default: 'h', // 'h'竖向，'l'横向
            validator: v => ['h', 'l'].includes(v)
        },
        status: {
            type: String,
            default: 'zc', // 'gz'=故障, 'lx'=离线, 'zc'=正常
            validator: v => ['gz', 'lx', 'zc'].includes(v)
        },
        // num:{
        //     type: String ,
        //     default: "01"
        // }
    },
    computed: {
        imgSrc() {
            // 构造图片路径
            return require(`../assets/${this.direction}-${this.status}.png`);
        },
        altText() {
            const map = { gz: '故障', lx: '离线', zc: '正常' };
            return `${this.direction === 'h' ? '竖' : '横'}-${map[this.status]}`;
        }
    }
};
</script>

<style scoped>
.status-image {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.status-image span {
    color: #fff;
    font-size: 24px;
    font-family: Impact;
    /* width: 100%; */
    /* height: auto; */
}
</style>